<template>
  <div v-if="data">
    <div class="main">
      <div class="more_main">
        <div class="zuo">
          <div
            class="items"
            @click="goto(m_id)"
            v-for="{
              m_date,
              m_detail,
              m_id,
              m_picture,
              m_read,
              m_subtitle,
              m_title,
            } in data"
            :key="m_id"
          >
            <div class="left">
              <img :src="m_picture" alt="" />
            </div>
            <div class="right">
              <div class="top">
                <span>{{ m_subtitle }}</span>
                <a href=""
                  ><h3>{{ m_title }}</h3></a
                >
              </div>
              <div class="middle">
                <span>发布时间:{{ m_date }}</span>
                <!-- <img src="../assets/img/eye.png" alt="" /> -->
                <span>阅读量:{{ m_read }}</span>
              </div>
              <div class="floor">
                <p>{{ m_detail }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="you">
          <div class="side-top">
            <div>
              <h3>猜你想找</h3>

              <router-link to="/compass_more">查看等多></router-link>
            </div>
            <div>
              <ul>
                <li>
                  <a href=""> <span>热</span>#金犀奖</a>
                  <a href=""> <span>热</span>#属羊婚配属相</a>
                </li>
                <li>
                  <a href=""> <span>热</span>#金犀奖</a>
                  <a href=""> <span>热</span>#属羊婚配属相</a>
                </li>
                <li>
                  <a href=""> <span>热</span>#金犀奖</a>
                  <a href=""> <span>热</span>#属羊婚配属相</a>
                </li>
                <li>
                  <a href=""> <span>热</span>#金犀奖</a>
                  <a href=""> <span>热</span>#属羊婚配属相</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="side-floor">
            <h3>结婚美图</h3>
            <ul>
              <li>
                <img
                  src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                  alt=""
                />
                <span>婚纱照篇</span>
              </li>
              <li>
                <img
                  src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                  alt=""
                />
                <span>婚纱照</span>
              </li>
              <li>
                <img
                  src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                  alt=""
                />
                <span>婚纱照</span>
              </li>
              <li>
                <img
                  src="https://qnm.hunliji.com/o_1dd2uhha81889tepbn41m701se2f.png"
                  alt=""
                />
                <span>婚纱照</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    const url = `/comRouter/compass/more`;
    this.axios.get(url).then(res => {
      console.log(res);
      this.data = res.data;
    });
  },
  methods: {
    goto(id) {
      this.$router.push({
        path: "/compass_detail",
        query: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 1200px;
  margin: 0 auto;
}
.more_main {
  display: flex;
}
.items {
  /* box-sizing: border-box; */
  width: 820px;
  /* margin: 30px 150px; */
  display: flex;
  padding: 20px 0 30px;
  border-bottom: 1px solid #e8e8e8;
}

.right {
  width: 600px;
  margin-left: 28px;
}

.left img:hover {
  cursor: pointer;
  opacity: 0.8;
}
.top {
  display: flex;
}
.top span {
  background-color: #fe7e33;
  color: #fff;
  border-radius: 3px;
  font-size: 8px;
  padding: 5px 7px 0;
  word-break: keep-all;
  cursor: pointer;
}
.top span:hover {
  opacity: 0.8;
}
.top a {
  width: 100%;
  color: #000;
  font-size: 17px;
  padding-left: 20px;
}
.top a:hover {
  color: red;
}
.middle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 12px;
  color: #7d7d7d;
}
.floor p {
  color: #333333;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.floor p:hover {
  cursor: pointer;
}
.you {
  margin-left: 75px;
}
.side-top {
  width: 400px;
}
.side-top h3 {
  font-size: 25px;
  font-weight: normal;
  display: inline-block;
}

.side-top div:nth-child(1) a {
  color: #333333;
  margin-left: 145px;
  font-size: 15px;
}
.side-top div:nth-child(1) a:hover {
  color: red;
}
.side-top ul {
  /* box-sizing: border-box; */
  background-color: #fff;
  width: 320px;
  border: 1px solid #f0f0f0;
  /* box-shadow: 0px 5px #f1f1f1; */
  /* padding: 20px; */
  border-radius: 6px;
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
}
.side-top ul li {
  margin: 20px;
}
.side-top li span {
  background-color: #f83244;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  padding: 2px 3px;
}

.side-top li a {
  color: #333;
  font-size: 14px;
}
.side-top li a:hover {
  color: red;
}
.side-top li a:last-child {
  margin-left: 80px;
}
.side-floor h3 {
  font-size: 25px;
  font-weight: normal;
  display: block;
  margin: 20px 0;
}
.side-floor ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 300px;
  background-color: #fbfbfb;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 4px 28px rgb(0 0 0 / 12%);
}
.side-floor li {
  width: 120px;
  background-color: #fff;
  display: flex;
  padding: 10px;
  margin-bottom: 15px;
}
.side-floor li:hover {
  opacity: 0.8;
  color: red;
}
.side-floor li img {
  width: 45px;
}

.side-floor li span {
  font-size: 18px;
  font-weight: 550;
  margin: auto 10px;
}
</style>
